---
title: CDN
description: Learn how to setup Embla Carousel using a CDN.
order: 5
date: 2021-02-21
---

# CDN

Start by including the Embla Carousel script from a CDN with a `script` tag:

```html
<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
```

---

## The HTML structure

A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following **HTML** structure to your carousel:

```html
<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```

## Styling the carousel

The wrapping element with the classname `embla` is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:

```css
.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}
```

## Accessing the carousel API

Grab the element with the classname `embla` and pass it as the first argument to the `EmblaCarousel` constructor. This will **initialize** the **carousel** and give you **access** to the Embla Carousel [API](/api/).

```html highlight={6}
<script type="text/javascript">
  const emblaNode = document.querySelector('.embla')
  const options = { loop: false }
  const emblaApi = EmblaCarousel(emblaNode, options)

  console.log(emblaApi.slideNodes()) // Access API
</script>
```

## Adding plugins

Start by including the plugin you want to use. In this example, we're going to include the [Autoplay](/plugins/autoplay/) plugin:

```html highlight={2}
<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
<script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>
```

Plugins included from a CDN will be **prefixed** with **EmblaCarousel**. Here's an example that shows how to add the [Autoplay](/plugins/autoplay/) plugin to your carousel:

```html highlight={4-5}
<script type="text/javascript">
  const emblaNode = document.querySelector('.embla')
  const options = { loop: false }
  const plugins = [EmblaCarouselAutoplay()]
  const emblaApi = EmblaCarousel(emblaNode, options, plugins)
</script>
```

Congratulations! You just created your first Embla Carousel.
